<template>
  <view>
    <view class="header">
      <u-swiper :autoplay="false" :list="trip.images" height="500" border-radius="0" mode="number"
                indicator-pos="bottomRight"></u-swiper>
      <view class="nav-bar">
        <view class="left" @click="back">
          <image src="../../../../static/imgs/backicon.png" mode=""></image>
        </view>
        <view class="right" @click="showShare=!showShare">
          <image src="../../../../static/imgs/moreicon.png" mode=""></image>
        </view>
      </view>
      <view class="share" v-if="showShare">
        <view class="share-li" @click="shareFn">
          <image src="../../../../static/imgs/fengxiang.png" mode=""></image>
          <text>分享</text>
        </view>
        <view class="line"></view>
        <view class="share-li">
          <image src="../../../../static/imgs/changtu.png" mode=""></image>
          <text>长图</text>
        </view>
        <view class="line"></view>
        <view class="share-li" @click="navTo('./activity/activity?id='+id)">
          <image src="../../../../static/imgs/huodongsq.png" mode=""></image>
          <text>活动申请</text>
        </view>
      </view>
    </view>
    <view class="number" style="color: #FFF;font-size: 30rpx;margin-top: -88rpx;z-index: 9999;position: relative;padding-left: 28rpx;" v-if="trip.trip_no>0">
      产品编号: {{ trip.trip_no }}
    </view>
    <view class="travelInfo">
      <view class="infoBox">
        <view class="title">
          {{ trip.title }}
        </view>
        <view class="type">
          {{ trip.type == '1' ? '体验游' : trip.type == '2' ? '品质游' : '尊享游' }}
          <text>已出游{{ trip.base_num }}人</text>
        </view>
        <view class="tips">
          <view class="tip" v-for="(tip,index) in trip.highlights" :key="index">
            {{ tip }}
          </view>
        </view>
        <view class="price-box">
          <view class="rel-price">
            ¥
            <text>{{ Number(trip.price) - Number(trip.use_welfare_fund) }}</text>
          </view>
          <!-- <view class="rel-price" v-if='$store.state.userInfo.user_level == 0'>
            ¥<text>{{Number(trip.price)-Number(trip.use_welfare_fund)}}</text>
          </view>
          <view class="rel-price" v-else>
            ¥<text>{{Number(trip.vip_price)-Number(trip.use_welfare_fund)}}</text>
          </view> -->
          <view class="fl-price">
            + {{ trip.use_welfare_fund }} 福利金
          </view>
        </view>
        <view class="banner">
          <image src="../../../../static/imgs/viptequan.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="dateBox">
      <view style="white-space: nowrap">
        <scroll-view scroll-x="true" scroll-left="">
          <view class="calendar">
            <view class="dayBox" :class="{active:days==dayIndex}" v-for="(day,days) in days" :key="days"
                  @click="day.price && changeDay(days)">
              <view class="date">
                {{ day.day }}
              </view>
              <view class="price" v-if="day.price">
                ¥ {{ day.price }}</text>
              </view>
              <view class="price" style="font-size: 24rpx;" v-else>
                暂无团期
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="calendar-pop" @click="showCalendar=true">
        <image class="more" src="../../../../static/imgs/gdrq.png" mode=""></image>
        <text>更多</text>
      </view>
    </view>
    <view class="comment">
      <view class="top">
        <view class="text">
          商品评价({{ count }})
        </view>
        <view class="all" @click="navTo('./review/review?id='+id)">
          查看全部
          <u-icon name="arrow-right" color="#666666" size="28"></u-icon>
        </view>
      </view>
      <view class="content" v-if="comment">
        <view class="head">
          <image class="headPic" :src="comment.head_pic" mode=""></image>
          <view class="info">
            <text class="name">{{ comment.nickname }}</text>
            <text class="date">{{ comment.create_time }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="text">
            {{ comment.content }}
          </view>
          <view class="imgs">
            <image v-for="item in comment.videos" :src="item" mode=""></image>
          </view>
        </view>
      </view>
      <view class="content" v-else>
        <view class="nocont">
          <image src="../../../../static/imgs/zanwupl.png" mode=""></image>
        </view>
        <view class="tip">暂无评论</view>
      </view>
    </view>
    <view class="tab-bar">
      <!-- #ifdef APP-PLUS -->
      <view style="width: 100%;height: var(--status-bar-height)"></view>
      <!-- #endif -->
      <u-tabs :list="tabList" :is-scroll="false" :current="current" inactive-color="#666666"
              active-color="#333333" bar-width="88" bar-height="4" :bar-style="barStyle" @change="tabChange"></u-tabs>
    </view>
    <!-- 图文详情 -->
    <view class="container content1">
      <view class="lable">
        <image src="../../../../static/imgs/tuwenxiangqing.png" mode=""></image>
        <view class="tit">
          图文详情
        </view>
      </view>
      <view class="cont" v-html="trip.image_details">
      </view>
    </view>
    <!-- 行程详情 -->
    <view class="container content2" style="padding: 0rpx;">
      <view style="padding: 0 20rpx;">
        <view class="lable">
          <image src="../../../../static/imgs/xingchengxiangqing.png" mode=""></image>
          <view class="tit">
            行程速览
          </view>
        </view>
        <view class="cont" v-html="trip.trip_preview">
        </view>
      </view>
      <view class="lable" style="padding: 0 20rpx;">
        <image src="../../../../static/imgs/xingchengxiangqing.png" mode=""></image>
        <view class="tit">
          行程详情
        </view>
      </view>
      <view class="cont">
        <view class="day-li" v-for="(item,index) in trip.trip_details_desc" :key="index" style="padding-bottom: 10rpx;">
          <view class="day">
            Day{{ item.day }} {{ item.title }}
          </view>
          <view style="padding: 0 20rpx;" class="descr" v-html="item.description">
          </view>
          <view class="foods" style="padding: 0 20rpx;margin-top: 10rpx;">
            <image src="../../../../static/imgs/canyin.png" mode=""></image>
            <text>{{ item.foods ? item.foods : '无' }}</text>
          </view>
          <view class="room" style="padding: 0 20rpx;margin-top: 10rpx;">
            <image src="../../../../static/imgs/zhusu.png" mode=""></image>
            <text>{{ item.live }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 费用说明 -->
    <view class="container content3">
      <view class="lable">
        <image src="../../../../static/imgs/feiyongshuoming.png" mode=""></image>
        <view class="tit">
          费用包含
        </view>
      </view>
      <view class="cont" v-html="trip.cost_details"></view>
      <view class="lable">
        <image src="../../../../static/imgs/feiyongshuoming.png" mode=""></image>
        <view class="tit">
          费用不含
        </view>
      </view>
      <view class="cont" v-html="trip.cost_out"></view>
    </view>
    <!-- 预定须知 -->
    <view class="container content4" style="padding-bottom: 120rpx;">
      <view class="lable">
        <image src="../../../../static/imgs/yudingxuzhi.png" mode=""></image>
        <view class="tit">
          预定说明
        </view>
      </view>
      <view class="cont" v-html="trip.booking_details">
      </view>
    </view>
    <view class="bot-tabBar">
      <view class="kefu" @click="navTo('../../../mine/kefu/kefu')">
        <image src="../../../../static/imgs/kefu.png" mode=""></image>
        <text>客服</text>
      </view>
      <view class="cart">
        <image src="../../../../static/imgs/gouwuc.png" mode=""></image>
        <text>购物车</text>
      </view>
      <view class="cart-btn">
        加入购物车
      </view>
      <view class="buy-btn" @click="nextFn">
        立即预定
      </view>
    </view>
    <u-popup v-model="showCalendar" mode="bottom" :closeable="true" border-radius="24">
      <view class="poPup">
        <view class="title">
          选择出行日期
        </view>
        <calendar :datePrice="datePrice"></calendar>
      </view>
    </u-popup>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <u-popup v-model="sharePop" mode="bottom" :closeable="true" border-radius="24">
      <view class="shareBox">
        <view class="share-item" @click="shareWeifriend">
          <image src="../../../../static/imgs/weixinhy.png" mode=""></image>
          <text>微信好友</text>
        </view>
        <view class="share-item" @click="shareCircle">
          <image src="../../../../static/imgs/pengyouq.png" mode=""></image>
          <text>朋友圈</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import myRequest from '@/api/index.js'
import calendar from '@/components/calendar/lv-calendar'

export default {
  components: {
    calendar,
  },
  data() {
    return {
      barStyle    : {
        background: 'linear-gradient(180deg, #6ABCFC 0%, #048FFE 100%)'
      },
      dayIndex    : 0,
      current     : 0,
      tabList     : [{
        name: '图文详情'
      },
                     {
                       name: '行程详情'
                     },
                     {
                       name: '费用说明'
                     },
                     {
                       name: '预定须知'
                     }
      ],
      pageTop     : 0,
      scrollTop   : 0,
      datePrice   : [],
      showCalendar: false,
      showShare   : false,
      sharePop    : false,
      id          : '', // 线路id
      trip        : {}, // 详情信息
      comment     : {}, // 评论
      count       : 0, //评论总数
      days        : [],
      user        : {},
      recommedu:''
    }
  },
  onLoad(option) {
    this.id = option.id
    this.recommedu = option.recommedu
    if(this.recommedu !== ''){
      this.$store.commit('changeRecommedu',this.recommedu)
    }
    this.getDetail()
    this.getReview()
    this.getDateTravel()
    //console.log(this.$store.state.userInfo)
    this.getInfo()
  },
  onPageScroll(e) {
    this.pageTop   = e.scrollTop - 74
    this.scrollTop = e.scrollTop;
    let that       = this
    uni.createSelectorQuery().in(this).selectAll(".container").boundingClientRect(data => {
      let list = []
      data.forEach((item, index) => {
        if (item.top < -item.height + 74) {
          list.push(index)
        }
      })
      if (list.length == 3) {
        that.current = 3
      }
      if (list.length == 2) {
        that.current = 2
      }
      if (list.length == 1) {
        that.current = 1
      }
      if (list.length == 0) {
        that.current = 0
      }
    }).exec();
  },
  methods: {
    async getInfo() {
      let res = await myRequest.getUserInfo()
      //console.log(res)
      if (res.status) {
        this.user = res.data
      }
    },
    nextFn() {
      if (this.trip.type == 1) {
        // 体验游
        if (this.$store.state.userInfo.user_level == 0) {
          uni.showToast({
                          title: '体验游为vip专享,请先升级vip',
                          icon : 'none'
                        })
        } else {
          uni.navigateTo({
                           url: '../next/next?id=' + this.id
                         })
        }
      } else {
        uni.navigateTo({
                         url: '../next/next?id=' + this.id
                       })
      }
    },
    // 微信好友
    shareWeifriend() {
      const trip = this.trip
      const user = this.user
      uni.share({
                  provider: "weixin",
                  scene   : "WXSceneSession",
                  type    : 0,
                  href    : "https://m.loveworldzh.com/#/pages/homePage/travel/travelDetail/travelDetail?id=" + trip.id + '&recommedu='+user.user_id,
                  title   : trip.title,
                  summary : trip.remark,
                  imageUrl: trip.icon_small,
                  success : function (res) {
                    console.log("success:" + JSON.stringify(res));
                  },
                  fail    : function (err) {
                    console.log("fail:" + JSON.stringify(err));
                  }
                });
    },
    // 朋友圈
    shareCircle() {
      const trip = this.trip
      uni.share({
                  provider: "weixin",
                  scene   : "WXSenceTimeline",
                  type    : 0,
                  href    : "https://m.loveworldzh.com/#/pages/homePage/travel/travelDetail/travelDetail?id=" + trip.id+ '&recommedu=' + user.user_id,
                  title   : trip.title,
                  summary : trip.remark,
                  imageUrl: trip.icon_small,
                  success : function (res) {
                    console.log("success:" + JSON.stringify(res));
                  },
                  fail    : function (err) {
                    console.log("fail:" + JSON.stringify(err));
                  }
                });
    },
    // 价格日期
    async getDateTravel() {
      let that = this
      let {
            id
          }    = this
      let res  = await myRequest.getCalendar({
                                               id: id
                                             })
      if (res.status) {
        let date = new Date()
        let year = date.getFullYear()
        for (var i = 0; i < 7; i++) {
          let dayObj = {
            day  : this.getDateStr(i),
            price: ''
          }
          this.days.push(dayObj)
        }
        res.data.forEach(function (i) {
          i.data.forEach(function (k) {
            let prcieObj   = {
              date : '',
              price: ''
            }
            prcieObj.date  = year + '-' + that.formatNum(i.month) + '-' + k.day
            prcieObj.price = k.price.split('.')[0]
            that.datePrice.push(prcieObj)
          })
        })
        this.datePrice.forEach(function (m) {
          let Dateitem = new Date(m.date)
          that.days.forEach(function (n) {
            let dateDay = n.day.split('周')[0]
            let dayItem = new Date(year + '-' + dateDay)
            if (Dateitem.getTime() == dayItem.getTime()) {
              n.price = m.price
            }
          })
        })
      }
    },
    // 获取一周内日期
    getDateStr(Count) {
      var dd = new Date();
      dd.setDate(dd.getDate() + Count);
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var w = dd.getDay();
      m     = m < 10 ? '0' + m : m;
      d     = d < 10 ? '0' + d : d;
      var week;
      switch (w) {
        case 0:
          week = '周日';
          break;
        case 1:
          week = '周一';
          break;
        case 2:
          week = '周二';
          break;
        case 3:
          week = '周三';
          break;
        case 4:
          week = '周四';
          break;
        case 5:
          week = '周五';
          break;
        case 6:
          week = '周六';
          break;
      }
      return m + "-" + d + week;
    },
    // 时间格式化
    formatNum(num) {
      return num < 10 ? '0' + num : num + '';
    },
    // 线路详情
    async getDetail() {
      let {
            id
          }   = this
      let res = await myRequest.getTraveldet({
                                               id: id
                                             })
      if (res.status) {
        this.trip = res.data
        this.$store.commit('changeTravelInfo', res.data)
      }
    },
    // 获取线路评论
    async getReview() {
      let {
            id
          }   = this
      let res = await myRequest.getComment({
                                             category_type: '2',
                                             source_id    : id
                                           })
      if (res.status) {
        this.comment = res.data[0]
        this.count   = res.comment_count
      }
    },
    changeDay(index) {
      this.dayIndex = index
    },
    // tab切换
    tabChange(index) {
      this.current = index
      if (this.current == 0) {
        uni.createSelectorQuery().in(this).select(".content1").boundingClientRect(data => {
          uni.pageScrollTo({
                             scrollTop: data.top + this.pageTop + 14,
                             duration : 100
                           })
        }).exec();
      }
      if (this.current == 1) {
        uni.createSelectorQuery().in(this).select(".content2").boundingClientRect(data => {
          uni.pageScrollTo({
                             scrollTop: data.top + this.pageTop + 14,
                             duration : 100
                           })
        }).exec();
      }
      if (this.current == 2) {
        uni.createSelectorQuery().in(this).select(".content3").boundingClientRect(data => {
          uni.pageScrollTo({
                             scrollTop: data.top + this.pageTop + 14,
                             duration : 100
                           })
        }).exec();
      }
      if (this.current == 3) {
        uni.createSelectorQuery().in(this).select(".content4").boundingClientRect(data => {
          uni.pageScrollTo({
                             scrollTop: data.top + this.pageTop + 14,
                             duration : 100
                           })
        }).exec();
      }
    },
    shareFn() {
      this.sharePop  = true
      this.showShare = false
    },
    navTo(url) {
      this.showShare = false
      uni.navigateTo({
                       url: url
                     })
    },
    back() {
      uni.navigateBack({
                         delta: 1
                       })
    }
  }
}
</script>
<style>
page {
  background-color:#F2F2F2;
}
</style>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 500rpx;
  background: #FFF;

  .nav-bar {
    width: 100%;
    height: 88rpx;
    padding: 0 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    position: fixed;
    // #ifdef APP-PLUS
    top: var(--status-bar-height);
    // #endif
    // #ifdef H5
    top: 0;

    // #endif
    .left,
    .right {
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }

  .share {
    width: 272rpx;
    height: 300rpx;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    position: fixed;
    // #ifdef APP-PLUS
    top: 128rpx;
    // #endif
    // #ifdef H5
    top: 44px;
    // #endif
    right: 20rpx;

    .line {
      width: 272rpx;
      height: 2rpx;
      background-color: #FFF;
    }

    .share-li {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      padding-left: 28rpx;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }

      text {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFF;
      }
    }
  }
}

.travelInfo {
  width: 100%;
  background: #FFF;
  border-radius: 24rpx 24rpx 0px 0px;
  position: relative;
  padding-bottom: 20rpx;
  margin-top: -10rpx;

  .infoBox {
    padding: 0 28rpx;

    .tips {
      display: flex;
      align-items: center;

      .tip {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666;
        margin-right: 4rpx;
      }
    }

    .title {
      padding: 10rpx 0;
      width: 100%;
      height: auto;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333;
    }

    .type {
      font-size: 28rpx;
      font-family: PingFangSC-Medium;
      color: #FB4F4B;

      text {
        margin-left: 20rpx;
        color: #666;
      }
    }

    .price-box {
      width: fit-content;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      display: flex;
      margin-top: 24rpx;

      .rel-price {
        height: 44rpx;
        width: fit-content;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
        border-radius: 8rpx 0px 0px 8rpx;
        padding: 0 6rpx;
        font-size: 24rpx;
        font-family: Arial;
        font-weight: 400;
        line-height: 44rpx;
        color: #333;

        text {
          font-size: 32rpx;
          font-weight: bold;
          margin-left: 4rpx;
        }
      }

      .fl-price {
        height: 44rpx;
        width: fit-content;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        background: #333;
        border-radius: 0px 8rpx 8rpx 0px;
        font-size: 24rpx;
        font-family: Arial;
        font-weight: 400;
        color: #FBE8B8;
        line-height: 44rpx;
        padding: 0 6rpx;
      }
    }

    .banner {
      margin: 32rpx auto 0;
      width: 100%;
      height: 134rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.dateBox {
  width: 710rpx;
  height: 160rpx;
  background: #FFF;
  border-radius: 16rpx;
  margin: 20rpx auto 0;
  padding: 22rpx 0;
  position: relative;

  .calendar-pop {
    width: 104rpx;
    height: 160rpx;
    background: #FFF;
    border-radius: 0px 8px 8px 0px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // box-shadow: 0px 0px 1px #999;

    .more {
      width: 36rpx;
      height: 36rpx;
    }

    text {
      font-size: 20rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #666;
      margin-top: 8rpx;
    }
  }

  .calendar {
    padding-left: 5rpx;

    .dayBox {
      display: inline-block;
      width: 152rpx;
      height: 116rpx;
      border: 2rpx solid #F2F2F7;
      border-radius: 16rpx;
      background-color: #FFF;
      text-align: center;
      margin: 0 5rpx;
      padding: 20rpx 0;

      &.active {
        background-color: #FDE7DF;
      }

      .date {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666;
      }

      .price {
        margin-top: 16rpx;
        font-size: 28rpx;
        font-family: Arial;
        font-weight: 400;
        color: #F16026;
      }

    }
  }
}

.comment {
  width: 710rpx;
  height: auto;
  background: #FFF;
  border-radius: 16rpx;
  margin: 20rpx auto 0;
  padding: 0 20rpx 10rpx;

  .top {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text {
      font-size: 32rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #333;
    }

    .all {
      font-size: 28rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #666;
    }
  }

  .content {

    .head {
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;

      .headPic {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }

      .info {
        margin-left: 16rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: 28rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #333;
        }

        .date {
          font-size: 24rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #999;
        }
      }
    }

    .bottom {
      .text {
        font-size: 28rpx;
        font-family: Segoe UI;
        font-weight: 400;
        color: #333;
      }

      .imgs {
        margin-top: 24rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        image {
          margin-bottom: 4rpx;
          width: 216rpx;
          height: 216rpx;
        }
      }
    }

    .nocont {
      width: 228rpx;
      height: 178rpx;
      margin: 0 auto;

      image {
        width: 228rpx;
        height: 178rpx;
      }
    }

    .tip {
      text-align: center;
      font-size: 24rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #333;
    }
  }
}

.tab-bar {
  width: 100%;
  margin-top: 16rpx;
  background-color: #FFF;
  position: sticky;
  top: 0;
  z-index: 99;
}

.container {
  background-color: #FFF;
  margin-bottom: 20rpx;
  padding: 0 20rpx;

  .lable {
    padding: 10rpx 0;
    display: flex;
    align-items: center;

    image {
      width: 28rpx;
      height: 28rpx;
    }

    .tit {
      margin-left: 10rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333;
    }
  }
}

.bot-tabBar {
  width: 100%;
  height: 120rpx;
  background-color: #FFF;
  position: fixed;
  z-index: 999;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-right: 20rpx;
  padding-left: 40rpx;

  .cart {
    margin-left: 54rpx;
  }

  .kefu,
  .cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    text {
      margin-top: 6rpx;
      font-size: 20rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #333;
    }
  }

  .cart-btn,
  .buy-btn {
    width: 220rpx;
    height: 76rpx;
    border-radius: 16rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 76rpx;
    color: #FFF;
  }

  .cart-btn {
    background: linear-gradient(180deg, #FDE156 0%, #F70 100%);
    margin-left: 64rpx;
  }

  .buy-btn {
    background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
    margin-left: auto;
  }
}

.poPup {
  .title {
    width: 100%;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 32rpx;
  }
}

.shareBox {
  display: flex;
  align-items: center;

  .share-item {
    width: 356rpx;
    height: 240rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      width: 88rpx;
      height: 88rpx;
    }

    text {
      font-size: 28rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #333;
      margin-top: 20rpx;
    }
  }
}

.cont {
  .day-li {
    width: 100%;
    height: auto;

    .day {
      background: #F2F6FF;
      padding: 0 20rpx;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpxpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #071A34;
    }

    .foods,
    .room {
      display: flex;
      align-items: center;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      text {
        margin-left: 10rpx;
      }
    }
  }
}

/deep/ .u-mode-center-box {
  background-color: rgba(255, 255, 255, 0) !important;
  left: 48rpx;
}

/deep/ .cont .text img {
  width: 710rpx !important;
  height: auto !important;
  display: block !important;
}

/deep/ .cont .text p {
  font-size: 28rpx !important;
}

/deep/ .cont p img {
  width: 710rpx !important;
  height: auto !important;
  display: block !important;
}

/deep/ .cont p {
  line-height: 52rpx !important;
}

/deep/ .u-swiper-indicator {
  bottom: 40rpx !important;
}

/deep/ table {
  width: 710rpx !important;
}

/deep/ table tbody tr td {
  border: 2rpx solid #666 !important;
}
</style>
